import { Card, Col, Row } from 'antd';

import { FormattedMessage, setLocale, getLocale } from 'umi';
import React, { Suspense } from 'react';
import styles from '../style.less';

const QuickLogin = ({ quickLoginList, loading }) => (
  <Card
    loading={loading}
    className={styles.salesCard}
    bordered={false}
    title={getLocale() === 'zh-CN' ? '快捷登录' : 'Quick Login'}
    style={{
      height: '95%',
    }}
  >
    <div>
      <Row
        gutter={24}
        style={{
          marginTop: 24,
        }}
      >
        {quickLoginList.map((item) => {
          return (
            <Col xl={4} lg={6} md={6} sm={6} xs={6}>
              <Suspense fallback={null}>
                <div>
                  <div
                    style={{
                      border: '1px dashed #c1bebe',
                      textAlign: 'center',
                      borderRadius: '5px',
                    }}
                    onClick={() => {
                      window.open(item.jumpUrl, '_blank');
                    }}
                  >
                    <div>
                      <img
                        src={item.logoUrl}
                        style={{ width: '65%', margin: '5px auto' }}
                        title="zabbix系统"
                      />
                    </div>
                    <div>
                      <span style={{ fontSize: '8px', color: '#000' }}>{item.sName}</span>
                    </div>
                  </div>
                </div>
              </Suspense>
            </Col>
          );
        })}
      </Row>
    </div>
  </Card>
);

export default QuickLogin;
